<template>
  <div @click.stop="activeHandle" class="ivz-edit-drawer"
       :class="visible ? 'ivz-ied-visible' : ''">
    <a-drawer :width="model.drawerRate" :height="model.drawerRate"
            :maskClosable="model.maskClosable" :mask="model.mask" @close="closeHandle"
            :visible="visible" :placement="model.placement" :closable="false"
            :getContainer="false" :wrapStyle="{ position: 'absolute' }"
            :afterVisibleChange="afterVisibleChange">
      <template #title>
        <div class="ivz-do-item">
            <ul style="list-style: none; margin: 0px; padding: 0px;">
                <li style="float: left; width: 128px;">{{model.title}}</li>
                <li style="float: right; font-size: 14px; color: #cccccc">注：输入的值将作为默认值</li>
                <li style="clear: both;"></li>
            </ul>
        </div>
      </template>
      <a-form style="width: 100%; min-height: 280px;" :labelAlign="model.align"
          :labelCol="model.layout == 'horizontal' ? model.labelCol : null" :layout="model.layout"
          :wrapperCol="model.layout == 'horizontal' ? model.wrapperCol : null" ref="viewModelRef">
        <div class="ivz-area-desc" v-if="metas.length == 0">
          <DragOutlined />请拖入表单组件
        </div>
        <draggable :list="metas" group="edit" @add="onAddHandle" :animation='200' component="a-row"
                   style="width: 100%; min-height: 280px; overflow-y: auto;" ghostClass="ivz-item-ghost"
                   :gutter="5" type="flex" align="top" justify="start">
          <template v-for="meta in metas" :key="meta.id">
<!--            <a-col v-if="meta.type=='group'" span="24">-->
<!--                <ivz-group-item :ref="meta.id" :view="model" :meta="meta" :data-id="meta.id"/>-->
<!--            </a-col>-->
            <ivz-form-item :meta="meta" :data-id="meta.id" @delMetaItem="delMetaItem" />
          </template>
        </draggable>
      </a-form>
      <div class="ivz-ied-fun">
        <AButton v-for="meta in funcMetas" :key="meta.func" type="default" class="ivz-edit-func">{{ meta.name }}</AButton>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
import {DragOutlined} from '@ant-design/icons-vue'
import {MixinEditConfig} from "../MixinEditConfig"
import IvzBtnItem from "@/components/item/IvzBtnItem.vue"
import {DrawerEditTabMetas} from "@/metas/FormTabMetas"
import IvzFormItem from "@/components/item/IvzFormItem.vue"
import IvzGroupItem from "@/components/item/IvzGroupItem.vue"
import Utils from "@/utils/basic.utils";
import {FuncMetasMap} from "@/components/OptionsMetaData";

export default {
  name: "IvzEditDrawer",
  mixins: [MixinEditConfig],
  components: {
      IvzFormItem, IvzGroupItem, IvzBtnItem, DragOutlined
  },
  data() {
      return {
        hidden: false,
        drawerRate: 360,
      }
  },
  created() {
    if(Utils.isBlank(this.meta['tabMetas'])) {
      this.meta.type = 'drawer';
      this.meta['tabMetas'] = DrawerEditTabMetas;
      this.initEditMeta(this.meta);
      this.initFuncMetas();
      this.switchEditVisible(true);
      this.switchActiveMetaTo(this.meta);
    } else {
      this.meta['tabMetas'] = DrawerEditTabMetas;
      if(this.meta.type != 'drawer') {
        this.meta.type = 'drawer';
        this.meta['tabModel'] = {};
        this.initEditMeta(this.meta);
        this.switchEditVisible(true);
        this.switchActiveMetaTo(this.meta);
      } else {
        this.switchEditVisible(false);
      }
    }
  },
  updated() { },
    methods: {
      ...mapMutations(['removeEditFunMeta']),
      closeHandle(e) {
        this.switchEditVisible(false);
      },
      afterVisibleChange(visible) {
        this.hidden = !visible;
      },
      initFuncMetas() {
        this.meta.tabModel['funcList'].forEach(func => {
          this.funcMetas.push({func, name: FuncMetasMap[func]})
        })
      }
  }
}
</script>

<style>
.ivz-edit-drawer {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.ivz-ied-visible {
  height: 100%;
}
.ivz-edit-drawer .ant-drawer-header {
    padding: 16px;
}

.ivz-edit-drawer .ant-modal-wrap, .ivz-edit-drawer .ant-modal-mask {
    z-index: 1150;
    position: absolute;
}

.ivz-drawer-view .ant-drawer {
    position: absolute;
}
.ivz-od-footer {
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 32px;
    margin: 0px;
    padding: 0px;
    z-index: 1008;
    list-style: none;
    position: absolute;
    background: #ffffff;
    border-top: 1px dashed #cccccc;
}
.ivz-ied-fun {
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 50px;
  padding:8px 24px;
  position: absolute;
  background: #ffffff;
  text-align: center;
  border-top: 1px solid #efefef;
}
.ivz-edit-func {
  margin: 0px 3px;
}
</style>
